<script>
import { ref, defineComponent } from 'vue'
/**
 * defineComponent 包裹住对象,可以获得输入提示, 如果不加就只是一个普通对象
 * 对于name  props 等属性就没有相应的提示了
 */
export default defineComponent({
  name: 'Coupon',
  props: ['percent'],
  emits: ['redeem'],
  //在选项式API中使用setup 函数, 组合式中则使用 script 标签
  setup(props, { emit }) {
    const percentOwn = ref(props.percent)

    const clickCoupon = () => emit('redeem', percentOwn.value)

    return { percentOwn, clickCoupon }
  }
})
</script>

<template>
  <form class="card p-2">
    <div class="input-group">
      <input v-model="percentOwn" type="text" class="form-control" placeholder="Promo code" />
      <div class="input-group-append">
        <button @click="clickCoupon" type="button" class="btn btn-secondary">Redeem</button>
      </div>
    </div>
  </form>
</template>
